<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <!--引入页面样式-->
    <link rel="stylesheet" href="../../pilot/css/basic.css">
    <style type="text/css">
        /*弹框*/
        .m-modal {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            display: none;
            z-index: 1000;
            overflow: auto;
            background-color: rgba(0, 0, 0, .4);
        }

        .m-modal-dialog {
            border-radius: 10px;
            height: 400px;
            font-family: "microsoft yahei", "宋体";
            position: relative;
            margin: 0 auto;
            margin-top: -100%;
            width: 700px;
            background-color: #ffffff;
            box-shadow: 0 3px 9px rgba(0, 0, 0, .5);
        }

        .left_modal_area img{
            position: absolute;
            top: 40px;
            width: 240px;
            height: 330px;
            left: 30px;
        }
        .m-modal-close {
            width: 50px;
            height: 50px;
            position: absolute;
            right: 0;
            top: 0;
            cursor: pointer;
            -webkit-user-select: none;
            -moz-user-select: none;
            -ms-user-select: none;
            user-select: none;
            background-image: url(../../pilot/imgs/closeBtn.png);
            background-repeat: no-repeat;
            background-position: center center;
        }
        .left_modal_area{
            float: left;
            border-radius: 10px;
            width: 300px;
            height: 100%;
        }
        .right_modal_area{
            position: absolute;
            right: 0;
            top: 40px;
            border-radius: 10px;
            width: 400px;
            height: 330px;
            overflow-x: hidden;
            overflow-y: auto;
        }
        .right_modal_area p{
            color: #9C9C9C;
        }
        /*滚动条样式*/
        .right_modal_area::-webkit-scrollbar {/*滚动条整体样式*/
            width: 4px;     /*高宽分别对应横竖滚动条的尺寸*/
            height: 4px;
        }
        .right_modal_area::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
            border-radius: 5px;
            -webkit-box-shadow: inset 0 0 10px #0059BB;
            background-color: white;
        }
        .right_modal_area::-webkit-scrollbar-track {/*滚动条里面轨道*/
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            -webkit-box-shadow: inset 0 0 10px white;
            border-radius: 0;
            background: rgba(0,0,0,0.1);
        }
        /*end*/

    </style>
</head>
<body>
<button class="showDetail">显示</button>
<div class="m-modal">
    <div class="m-modal-dialog">
        <div class="left_modal_area">
            <img src="../../pilot/imgs/laoshitupian.fw.png">
        </div>
        <span class="m-modal-close"></span>
        <div class="right_modal_area">
            <span class="name_teacher">赫老师</span><span class="level_teacher">金牌考研老师</span><br>
            <span class="skill_teacher">特长 ：</span><span class="skillOne">专业课程强化培训</span>
            <span class="skillOne">考题预测分析</span>
            <p>
                关于你，2012年的九月，那是我们认识的季节，在四十多平米的教室里，我认识了你。
                我们是同学，彼此都还不熟悉的同学。那一句个子还高嘛，是我关注你的开始，有意无意的从四组向
                一组瞟你，小心翼翼的眼神怕你发现，却又怕你不明白，一点点的喜欢不敢声张。
                <br>后来的打过来骂过去，
                后来聊天的默契，互道的晚安，才明白原来就是喜欢，没有其他。确定是喜欢，可是还是不敢声张。只
                因当初在人群中你说了一句，从此，你便住在了心里。不敢轻易靠近打扰，是怕自己扰了你的生活步调；
                不敢轻易对你开口言爱，是怕那样做是一种冒犯，是一种伤害我们关系的因素。<br>
                一场高考，考散了我们，毕业了会不会就是终生最后一见，很高兴，我们不是。各奔东西了，你们继续上
                了大学，值得欣慰的是，你们也是异地，这样不能算是我心机，只能说是恰巧，你们的安排恰合我意。后
                来也有听说，她从她的城市去看你，而那时的我能说什么呢。她是真心爱你，这是事实。我也曾和闺蜜说
                过，一生至少该有一次，为了某个人而忘了自己，不求有结果，不求同行，不求曾经拥有，甚至不求你爱
                我，只求在我最美的年华里，遇到你。今生遇见你，我觉得是幸福的，尽管这幸福交杂着万般痛苦。我也
                曾幻想着悄悄地去到你的学校，在某个阳光明媚的下午，在你去教室的路上和你来场偶遇，精心准备的
                偶遇，。可是我还来不及去和你偶遇，你们就毕了业。爱是种很玄的东西，说不清，道不明，剪不断，理还
                乱。世上，有种爱明知没有结果，却依然坚守原地，不舍离去，哪怕握不住你的一丝余温，依然选择默默为
                你守候。一路来去，心门只为你独开，山城只为你独驻，白天只为你旖旎，黑夜只为你流连。因为爱你，哪
                怕心入住荒岛，还是会以最深情的眼神，看着你幸福。
            </p>
        </div>
    </div>
</div>
<script src="../../pilot/js/jquery/window/jquery1.9.min.js"></script>
<script src="../../pilot/js/jquery/window/setWindows.js"></script>
<script>
    $(document).ready(function () {
        var m1 = new MyModal.modal(function () {
            // alert("你点击了确定");
        });
        $(".showDetail").click(function () {
            m1.show();
            document.documentElement.style.overflow = "hidden";// 禁止页面滚动
            //以下为点击时遮罩层后对应老师框状态
            $(this).addClass('clickBtnStyle');
            $(this).parent().addClass('set_teacher_backgroundOne');
            $(this).siblings('.teacher_info').children('.skillInfo').addClass('set_teacher_levelBackOne');
            $(this).siblings('.teacher_info').children().addClass('setColorOne');
        });
        $(".m-modal-close").click(function () {
            m1.hide();
            document.documentElement.style.overflow = "scroll";//使网页恢复可滚
            $(".learn_more").removeClass('clickBtnStyle');
            $('td').removeClass('set_teacher_backgroundOne');
            $('.skillInfo').removeClass('set_teacher_levelBackOne');
            $('.teacher_info').children().removeClass('setColorOne');
        });
        setClass();

    });

    function setClass() {
        var selectThree = $(".learn_more");
        selectThree.hover(function () {
            $(this).addClass('setBackImg')
            $(this).siblings('.select').hide();
            $(this).siblings('.selected').show();
        });
        selectThree.mouseleave(function () {
            $(this).removeClass('setBackImg')
            $(this).siblings('.select').show();
            $(this).siblings('.selected').hide();
        });
    }
</script>
</body>
</html>